/*准备工作： 1获取画布，获取画笔对象 */
    var mcanvas = document.querySelector("canvas");
    var ctx = mcanvas.getContext("2d");

    /*准备工作：2创建一个二维数组 用来定义绘制棋盘线*/
    var count = 15;//用来定义棋盘的行数和列数
    var map = new Array(count);

    for (var i = 0; i < map.length; i++) {
        map[i] = new Array(count);
        for (var j = 0; j < map[i].length; j++) {
            map[i][j] = 0;
        }
    }

    /*准备工作：3初始化棋子*/
    var black = new Image();
    var white = new Image();
    black.src = "../img/black.png";
    white.src = "../img/white.png";


    //开始绘制 1绘制棋盘线
    ctx.strokeStyle = "#fff";
    var rectWH = 40; //设置绘制矩形的大小
    for (var i = 0; i < map.length; i++) {
        for (var j = 0; j < map[i].length; j++) {
            ctx.strokeRect(j * rectWH, i * rectWH, rectWH, rectWH);
        }
    }

    // 用来进行黑白子的切换
    var isBlack = true;

 //开始绘制 2下子
 function play(e) {
    //获取点击canvas的位置值默认，canvas的左上角为（0,0） 点
    var leftOffset = 20;//body 的margin
    var x = e.clientX - leftOffset;
    var y = e.clientY - leftOffset;
    // console.log(x+" "+y);
    // 设置点击点后棋子下在哪里,获取点击的位置进行判断如果超过格子的一半则绘制到下一个点如果小于 则绘制在上一个点上
    var xv = (x - rectWH / 2) / rectWH;
    var yv = (y - rectWH / 2) / rectWH;

    var col = parseInt(xv) + 1;
    var row = parseInt(yv) + 1;
    console.log(xv + " " + yv + " , " + col + " " + row);

    //严格点需要验证 ，验证所输入的点是否在数组中已经存在 ，如果存在 则返回
    if (map[row][col] != 0) {
        alert("此处已经落子");
        return;
    }

    // 切换绘制黑白子
    if (isBlack) {
        ctx.drawImage(black, col * 40 - 20, row * 40 - 20);
        isBlack = false;
        map[row][col] = 1;

        $.ajax({
            url: "http://127.0.0.1:5000/yes",//请求的url地址
            type: 'post',//设置请求的http方式，method也可以
            dataType: 'json',//将服务器端返回的数据直接认定为是这个格式，然后会做一些自动的处理(如果是json字符串，会自动转化为js对象),服务器返回的默认格式是text/html格式
            data: {//向服务器端发送的数据
                t: 1,
                row: row,
                col: col,
            },
            success: function (data) {//请求成功之后执行的回调函数
                if(data.code===201){
                    alert('黑棋获胜')
                }else if(data.code===202){
                    alert('白棋获胜')
                }

            },
            error: function(error){
                console.log(error)
            }
        });

        // Yes(1,row,col)

    } else {
        ctx.drawImage(white, col * 40 - 20, row * 40 - 20);
        isBlack = true;
        map[row][col] = 2;
        $.ajax({
            url: "http://127.0.0.1:5000/yes",//请求的url地址
            type: 'post',//设置请求的http方式，method也可以
            dataType: 'json',//将服务器端返回的数据直接认定为是这个格式，然后会做一些自动的处理(如果是json字符串，会自动转化为js对象),服务器返回的默认格式是text/html格式
            data: {//向服务器端发送的数据
                t: 2,
                row: row,
                col: col,

            },
            success: function (data) {//请求成功之后执行的回调函数
                if(data.code===201){
                    alert('黑棋获胜')
                }else if(data.code===202){
                    alert('白棋获胜')
                }

            },
            error: function(error){
                console.log(error)
            }
        });
        // Yes(2,row,col)
    }


 }

// function replay(){
//    $.ajax({
//            url: "http://127.0.0.1:5000/replay",//请求的url地址
//            type: 'post',//设置请求的http方式，method也可以
//            dataType: 'json',//将服务器端返回的数据直接认定为是这个格式，然后会做一些自动的处理(如果是json字符串，会自动转化为js对象),服务器返回的默认格式是text/html格式
//            data: {//向服务器端发送的数据
//                isReplay: true
//            },
//            success: function (data) {//请求成功之后执行的回调函数
//                window.location.href = "game.html";
//            },
//            error: function(error){
//                console.log(error)
//            }
//        });
// }